<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
  <Dialog :visible="visible"
    dataChange="4" :barData="barData"
    @close="visible = false" title="参考数据类别数">
  </Dialog>
</template>

<script setup>
import { onMounted, watch, nextTick,ref} from "vue";
import { useEcharts } from "../../../../hook/ useEcharts";
import * as echarts from "echarts";
import Dialog from '@/components/Dialog/Dialog.vue'
const { chartRef, initChart, updateChart,setClickHandler } = useEcharts();
const props = defineProps(['xdata']);
const visible = ref(false);
const barData=ref({X:2})
let pieColors = ['#20E7EA', '#4281F2', '#FFC26F']
let richColor = {}
pieColors.forEach((item, idx) => {
  richColor[`color${idx}`] = {
    fontSize: 18,
    color: item
  }
})
const getOption = () => ({
  color: pieColors,
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    left: 'center',
    bottom: '10%',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#fff'
    },
    data: props.xdata.map(item => item.name)
  },
  series: [
    {
      type: 'pie',
      center: ['50%', '30%'],
      avoidLabelOverlap: true,
      radius: ['20%', '70%'],
      roseType: 'area',
      label: {
        show: false,
        formatter: params => {
          // console.log(params)
          return `{color${params.dataIndex}|${params.name}\n${params.value}}`
        },
        rich: richColor
      },
      // label: {
      //   show: true,
      //   position: 'outside',
      //   formatter: (params) => {
      //     return `<div style="color: ${params.color}">${params.name}</div>
      //     <div>${params.value}</div>`;
      //   },
      // },
      labelLine: {
        show: true,
        length: 15,
        length2: 10
      },
      data: props.xdata
    }
  ]
})
watch(() => props.xdata, async (newVal) => {
  await nextTick();
  updateChart(getOption())
},{deep: true});
// 模拟更新图表数据
const updateData = () => {
  const newOption = {
    series: [],
  };
  updateChart(newOption);
};
const handleChartClick = () => {
  visible.value = true
}
onMounted(() => {
  // 初始化图表
  initChart(getOption());
  setClickHandler(handleChartClick)
});
</script>

<style scoped lang="scss">
</style>
